<template>
  <div class="v-page-body">
    <router-view></router-view>
    <!-- 首页路由 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item v-for="item in tabs" :key="item.id" :id="item.id">
        <img slot="icon" :src="item.active?item.icon.icon_active:item.icon.icon"> {{item.name}}
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
  import {
    Tabbar,
    TabItem
  } from 'mint-ui';
  export default {
    data() {
      return {
          tabs:[
              {
                id:'movie',
                name:'电影',
                path:'/home',
                icon:{
                    icon:'../../static/img/movie.png',
                    icon_active:'../../static/img/movie_active.png'
                },
                active:true
              },
              {
                 id:'cinema',
                 name:'影院',
                 path:'/cinema',
                 icon:{
                    icon:'../../static/img/cinema.png',
                    icon_active:'../../static/img/cinema_active.png'
                 },
                 active:false 
              },
              {
                 id:'my',
                 name:'我的',
                  path:'/my',
                 icon:{
                    icon:'../../static/img/i.png',
                    icon_active:'../../static/img/i_active.png'
                 },
                 active:false 
              }
          ],  
            selected: 'movie'
      };
    },
    components: {
      Tabbar,
      TabItem,
    },
    watch: {
        selected: function (val, oldVal) {
          let $this = this;
            // 这里就可以通过 val 的值变更来确定
            this.tabs.forEach(function(ele,i){
              if (ele.id == val) {
                  ele.active = true;
                  $this.$router.push(ele.path);
              } else {
                 ele.active = false;
              }
            })
        }
    }
  }

</script>

<style scoped>
  .mint-tabbar > .mint-tab-item.is-selected{
    color: #d9534f;
  }
  .v-page-body{
    background-color: #fff;
  }
</style>
